/**
* 报告
*/
<template>
	<view>
		<cu-custom bgColor="v-bg-main v-font-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">报告</block>
		</cu-custom>
		<view class="" style="padding-bottom: 40upx;">
			<view class="report-name">{{from.name}}</view>
			<view class="flex justify-between report-form v-border-bottom">
				<text class="v-font-text">手机号</text>
				<text>{{from.mobile}}</text>
			</view>
			<view class="flex justify-between report-form v-border-bottom">
				<text class="v-font-text">民族</text>
				<text>{{from.famous}}</text>
			</view>
			<view class="flex justify-between report-form v-border-bottom">
				<text class="v-font-text">分娩日</text>
				<text>{{from.childbirthDay}}</text>
			</view>
			<view class="flex justify-between report-form v-border-bottom">
				<text class="v-font-text">剖腹产/顺产</text>
				<text>{{from.production}}</text>
			</view>
			<view class="flex justify-between report-form v-border-bottom">
				<text class="v-font-text">母乳喂养/奶粉喂养</text>
				<text>{{from.feed}}</text>
			</view>
			<!-- <view class="flex justify-between report-form">
				<text class="v-font-text">口味</text>
				<text>偏甜</text>
			</view> -->
		</view>
		<view class="v-bg-division" style="height: 40upx;width: 100%;"></view>
		<view class="">
			<view class="list-item flex justify-center" style="font-size: 40upx;">
				<view style="width: 600upx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
					{{from.health}}
				</view>
			</view>
			<!-- <view style="padding: 0 50upx;">
				<view class="colums-chart">
					<block v-for="(item,index) in Column.series[0].data" :key="index">
						<view class="columnItem" :style="[{height:(item.value!=0?item.value:20)+'%','background-color':item.color!=''?item.color:''}]"></view>
					</block>
				</view>
				<view class="colums-but">
					<block v-for="(item,index) in Column.categories" :key="index">
						<view class="columnItemName">{{item}}</view>
					</block>
				</view>
			</view> -->
			<view v-if="canvaFlag == 1" class="flex justify-center align-center">
				<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
			</view>
			<view v-else class="flex justify-center align-center">
				<image class="charts" :src="imgsUrl"></image>
			</view>
			<view class="flex justify-center align-center" style="font-size: 20upx;flex-direction: column;padding: 40upx 0upx;">
				<view class="flex" v-for="(item,ind) in symptom" :key="ind" style="width: 80%;">
					<view class="" style="width: 10%">
						{{item.name}}:
					</view>
					<view class="" style="width: 90%;line-height:17px;color: #9E9E9E;">
						{{item.represent}}
					</view>
				</view>
			</view>
		</view>
		<view class="v-bg-division" style="height: 40upx;width: 100%;"></view>
		<view class="">
			<view class="" style="border-bottom: 2upx solid #CAC9C9;padding: 30upx 0upx 20upx 40upx;">
				<text style="font-size: 40upx;">体检报告</text>
			</view>
			<view class="" style="padding: 40upx 40upx;">
				<view class="flex report-testing">
					<view class=""><image class="report-img" :src="from.face.imgUrl" mode=""></image></view>
					<view class="" style="width: 15%;margin-left: 20upx;">面诊:</view>
					<view class="" style="width: 85%;">{{from.face.report}}</view>
				</view>
				<view class="flex report-testing">
					<view class=""><image class="report-img" :src="from.tongue.imgUrl" mode=""></image></view>
					<view class="" style="width: 15%;margin-left: 20upx;">舌诊:</view>
					<view class="" style="width: 85%;">{{from.tongue.report}}</view>
				</view>
				<view class="flex report-testing">
					<view class="" style="margin-left: 140upx;width: 15%;">体质:</view>
					<view class="" style="width: 85%;">{{from.healths}}</view>
				</view>
				<!-- <view class="flex report-testing">
					<view class="" style="margin-left: 140upx;width: 15%;">宜吃:</view>
					<view class="" style="width: 85%;">海参，羊肉，木耳，栗子等</view>
				</view>
				<view class="flex report-testing">
					<view class="" style="margin-left: 140upx;width: 15%;">忌吃:</view>
					<view class="" style="width: 85%;">西瓜，梨子，葡萄，木瓜等</view>
				</view> -->
			</view>
		</view>
		<view class="v-bg-division" style="height: 40upx;width: 100%;"></view>
		<view class="">
			<view class="" style="border-bottom: 2upx solid #CAC9C9;padding: 30upx 0upx 20upx 40upx;">
				<text style="font-size: 40upx;">宜吃忌口</text>
			</view>
			<view class="" style="padding: 40upx 40upx;">
				<view class="flex report-testing">
					<view class="" style="width: 15%;">宜吃:</view>
					<view class="" style="width: 85%;">{{from.advises}}</view>
				</view>
				<view class="flex report-testing">
					<view class="" style="width: 15%;">忌口:</view>
					<view class="" style="width: 85%;">{{from.avoid}}</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center align-center v-bg-division" style="flex-direction: column;padding: 40upx 0upx 0upx 0upx;" v-for="(item,index) in recipesVos" :key="index">
			<text style="font-size: 36upx;font-weight: 600;width: 90%;">{{"第"+(index+1)+"周菜单（"+item.startTime+"至"+item.endTime+"）"}}</text>
			<view class="padding" style="padding-bottom: 0upx;">
				<view class="grid margin-bottom text-center col-5 index-shadow" style="font-size: 26upx;">
					<view class="v-bg-white col-title"></view>
					<view class="v-bg-white col-title">早餐</view>
					<view class="v-bg-white col-title">中餐</view>
					<view class="v-bg-white col-title">晚餐</view>
					<view class="v-bg-white col-title">加餐</view>
					<block v-for="(itemx,indexs) in item.recipess" :key="indexs">
						<view class="v-bg-white flex justify-center align-center col-title" >{{"第"+(indexs+1)+"天"}}</view>
						<view class="v-bg-white flex justify-center align-center col-title col-font" @click="seeRecipes(itemx.breakfast)"><ul style="width: 100%;"><li class="li-font" v-for="(items,ind) in itemx.breakfast" :key="ind">{{items.name}}</li></ul></view>
						<view class="v-bg-white flex justify-center align-center col-title col-font" @click="seeRecipes(itemx.dinner)"><ul style="width: 100%;"><li class="li-font" v-for="(items,ind) in itemx.dinner" :key="ind">{{items.name}}</li></ul></view>
						<view class="v-bg-white flex justify-center align-center col-title col-font" @click="seeRecipes(itemx.lunch)"><ul style="width: 100%;"><li class="li-font" v-for="(items,ind) in itemx.lunch" :key="ind">{{items.name}}</li></ul></view>
						<view class="v-bg-white flex justify-center align-center col-title col-font" @click="seeRecipes(itemx.mealAddition)"><ul style="width: 100%;"><li class="li-font" v-for="(items,ind) in itemx.mealAddition" :key="ind">{{items.name}}</li></ul></view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;

	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				cWidth: '',
				cHeight: '',
				imgsUrl:'',
				canvaFlag:1,
				pixelRatio: 1,
				checkId:'',
				serverData: '',
				recipesVos: [],
				symptom: [],
				from:{
					name:'',
					mobile:"",
					famous:'',
					childbirthDay:'',
					production:'',
					feed:'',
					health:'',
					face:{
						imgUrl:'',
						report:''
					},
					tongue:{
						imgUrl:'',
						report:''
					},
					healths:'',
					advises:'',
					avoid:''
					
				},
				Column:{
					categories:[],
					series:[{
						"name": "指数",
						"data": []
					  }]
				},
			}
		},
		onLoad(opt) {
			_self = this;
			this.cWidth = uni.upx2px(600);
			this.cHeight = uni.upx2px(200);
			this.checkId = opt.checkId;
			const that = this;
			const url = that.$profile.url + "/console/main/rewrite/getCheckResult";
			that.$http.post(url,{checkId:that.checkId}).then(res=>{
				const data = res.data;
				console.log(data);
				that.recipesVos = res.data.recipesVos;
				const froms={
					name:data.info.maternalName,
					mobile:data.info.maternalMobile,
					famous:data.info.maternalNation,
					childbirthDay:data.info.deliveryDay,
					production:data.info.deliveryType == 0?'顺产':'剖腹产',
					feed:data.info.deliveryType == 0?'母乳喂养':'奶粉喂养',
					health:data.score.highHealth.join("、"),
					face:{
						imgUrl:data.report.face.mediaAddress,
						report:data.report.face.result.replace(/#/g,"、")
					},
					tongue:{
						imgUrl:data.report.tongue.mediaAddress,
						report:data.report.tongue.result.replace(/#/g,"、")
					},
					healths:data.score.report,
					advises:data.score.advises,
					avoid:data.score.avoid,
				};
				that.from = froms;
				var categories = [];
				for (var i = 0; i < data.score.histograms.length; i++) {
					categories.push(data.score.histograms[i].name);
				}
				that.Column.categories = categories;
				that.Column.series[0].data = data.score.histograms;
				that.symptom = res.data.score.healthList;
				that.getServerData();
			})
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			seeRecipes(e){
				console.log(e);
				var id = [];
				for (var i = 0; i < e.length; i++) {
					id.push(e[i].id);
				}
				console.log(id);
				uni.navigateTo({
					url: '../recipes/recipes?id='+id.join(",")
				})
			},
			getServerData() {
				const that = this;
				_self.showColumn("canvasColumn", _self.Column);
				canvaColumn.addEventListener('renderComplete', () => {
					setTimeout(function(){
						uni.canvasToTempFilePath({
						  x: 0,
						  y: 0,
						  quality:1.0,
						  destWidth: 900,
						  destHeight: 300,
						  canvasId: 'canvasColumn',
						  success: function(res) {
							that.canvaFlag = 0;
						    // 在H5平台下，tempFilePath 为 base64
							that.imgsUrl = res.tempFilePath;
						  } 
						})
					},1000)
				});
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						},
						markLine: {
							type: 'solid',
							dashLength: 4,
							data: [
								{
									value: 50,
									lineColor: '#F8D37D',
									showLabel: false,
									labelFontColor: '#71CA94',
									labelBgColor: '#ffffff',
									labelBgOpacity: '0.8',
									yAxisIndex: 100
								}
							],
						}
					}
				});

			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	.colums-chart {
	  margin-top: 20rpx;
	  margin-bottom: 20rpx;
	  display: flex;
	  align-items: flex-end;
	  height: 100rpx;
	  width: 100%;
	}
	
	.colums-but {
	  display: flex;
	  width: 100%;
	}
	
	.columnItem {
	  width: 12%;
	  margin: 0rpx 2%;
	  background-color: #e7e7e7;
	}
	
	.columnItemName {
	  width: 12%;
	  margin: 0rpx 2%;
	  font-size: 20rpx;
	  color: #8C8C8C;
	}
	
	.col-title{
		padding: 10upx 0upx;
		border: 1upx solid #EDEDED;
	}
	
	.col-font{
		font-size: 20upx;
		color: #9E9E9E;
	}
	
	.li-font{
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.report-shadow{
		position: relative;
		-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
	}
	
	.report-testing{
		font-size: 30upx;
		line-height:50upx;
		color: #9E9E9E;
	}
	
	.report-img{
		width: 120upx;
		height: 120upx;
	}
	
	.report-name {
		margin-top: 60upx;
		padding-left: 60upx;
		font-size: 60upx;
	}

	.list-item{
		position: relative;
		width: 100%;
		text-align: center;
		height: 120upx;
		line-height: 120upx;
	}
	
	.report-form {
		padding: 20upx 60upx;
		font-size: 30upx;
	}

	.charts {
		width: 600upx;
		height: 200upx;
		background-color: #FFFFFF;
	}
</style>
